<template>
  <div>
    <base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-7"></base-header>
    <notifications></notifications>
    <div class="container-fluid mt--7">
      <div class="card shadow">
        <card type="frame">{{title}}</card>
        <div class="card-header border-0">
          <div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label form-control-label">朗读标题</label>
              <div class="col-md-10">
                <base-input v-model="model.title"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >作者</label>
              <div class="col-md-10">
                <base-input v-model="model.authornick" disabled></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-email-input"
                class="col-md-2 col-form-label form-control-label"
              >音源文件</label>
              <div class="col-md-10">
                <audio controls="controls">
                  <source v-bind:src="model.fileurl" type="audio/mp3" />
                </audio>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-email-input"
                class="col-md-2 col-form-label form-control-label"
              >朗读分类</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.rdcategoryname" disabled />
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-email-input"
                class="col-md-2 col-form-label form-control-label"
              >所在小队分类</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.teamcategory" disabled />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-email-input" class="col-md-2 col-form-label form-control-label">时长</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.duration" />
              </div>
            </div>

            <div class="form-group row">
              <label for="example-email-input" class="col-md-2 col-form-label form-control-label">表扬</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.gbiaoyang" />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-email-input" class="col-md-2 col-form-label form-control-label">分享</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.gsharecount" />
              </div>
            </div>
            <div class="form-group row">
              <label for="example-email-input" class="col-md-2 col-form-label form-control-label">分数</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.gscore" />
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-email-input"
                class="col-md-2 col-form-label form-control-label"
              >播放次数</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.gruntimecount" />
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-email-input"
                class="col-md-2 col-form-label form-control-label"
              >总评论</label>
              <div class="col-md-10">
                <base-input type="text" v-model="model.gcomment" disabled />
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >是否公开</label>
              <div class="col-md-10">
                <base-radio name="1" class="mb-3" v-model="model.ispublic">公开</base-radio>
                <base-radio name="0" class="mb-3" v-model="model.ispublic">私有</base-radio>
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >是否推荐</label>
              <div class="col-md-10">
                <base-radio name="1" class="mb-3" v-model="model.recommend">推荐</base-radio>
                <base-radio name="0" class="mb-3" v-model="model.recommend">不推荐</base-radio>
              </div>
            </div>

            <!-- <div class="form-group row" v-show="showSaveBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success" @click="saveAncient()">
                  <i class="ni ni-send"></i>提交
                </base-button>
              </div>
            </div>-->
            <div class="form-group row" v-show="showUpdateBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success" @click="update()">
                  <i class="ni ni-send"></i>更新
                </base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import validate from "~/config/utils/validate";
import { findLdRecordsByIdApi,updateLdRecordsByIdApi } from "~/config/api/ldrecordservice";
export default {
  asyncData() {},
  head: {
    title: "添加商品",
  },
  name: "tables",
  data() {
    return {
      title: "",
      showSaveBtn: false,
      showUpdateBtn: false,
      model: {
        id: "",
        title: "",
        authornick: "",
        fileurl: "",
        duration: "",
        gbiaoyang: "",
        gscore: "",
        gruntimecount: "",
        gsharecount: "",
        ispublic: "",
        gcomment: "",
        teamcategory: "",
        recommend: "",
        rdcategoryname: "",
      },
    };
  },
  created: function () {
    let pageaction = this.$route.query.action;
    if (pageaction == "save") {
      this.showSaveBtn = true;
    }
    if (pageaction == "edit") {
      this.title = "您正在编辑朗读记录";
      this.showUpdateBtn = true;
      let id = this.$route.query.id;
      this.findById(id);
    }
  },
  mounted: function () {},
  methods: {
    async findById(id) {
      let params = {
        id: id,
      };
      await findLdRecordsByIdApi(params).then((res) => {
        if (res.sucflag) {
          this.model.title = res.bean.title;
          this.model.fileurl = res.bean.fileurl;
          this.model.duration = res.bean.duration;
          this.model.gbiaoyang = res.bean.gbiaoyang;
          this.model.gscore = res.bean.gscore;
          this.model.gsharecount = res.bean.gsharecount;
          this.model.gruntimecount = res.bean.gruntimecount;
          this.model.authornick = res.bean.authornick;
          this.model.ispublic = res.bean.ispublic;
          this.model.gcomment = res.bean.gcomment;
          this.model.teamcategory = res.bean.teamcategory;
          this.model.recommend = res.bean.recommend;
          this.model.rdcategoryname = res.bean.rdcategoryname;
          this.model.id = res.bean.id;
        }
      });
    },
    async update() {
      let params = {
        id: this.model.id,
        title: this.model.title,
        gbiaoyang: this.model.gbiaoyang,
        gsharecount: this.model.gsharecount,
        gscore: this.model.gscore,
        gruntimecount: this.model.gruntimecount,
        ispublic:this.model.ispublic,
        recommend:this.model.recommend
      };
      await updateLdRecordsByIdApi(params).then((res) => {
        if (res.sucflag) {
          this.$router.push("/ldrecords/ldrecordslist");
        }
      });
    },
  },
  layout: "DashboardLayout",
};
</script>
<style></style>
